import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const ProgressTestScreen: React.FC = () => {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        section: { marginBottom: 20 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
        col: { gap: 12 },
        borderedRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12, borderWidth: 1, borderColor: colors.border, padding: 8, borderRadius: 8 },
    });

    // 受控：线性进度（值范围 0-1）
    const [progress, setProgress] = useState<number>(0.25);

    const inc = (step = 0.1) => setProgress(p => Math.min(1, parseFloat((p + step).toFixed(3))));
    const dec = (step = 0.1) => setProgress(p => Math.max(0, parseFloat((p - step).toFixed(3))));
    const reset = () => setProgress(0);

    return (
        <Layout.Page
            headerShown
            headerProps={{ title: 'Progress 测试', backVisible: true }}
            padding={16}
            scrollable
            testID="ProgressTestScreen"
        >
            {/* 基础：线性进度（受控 value） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础线性进度</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>受控 value（0–1）；提供增减与重置</UI.Text>
                    <View style={styles.col}>
                        <UI.Text variant="body1" color="textSecondary" mb={8}>当前进度：{Math.round(progress * 100)}%</UI.Text>
                        <UI.Progress
                            variant="linear"
                            value={progress}
                            color="primary"
                            trackColor={colors.border}
                            testID="progress-linear-controlled"
                        />
                        <View style={styles.row}>
                            <UI.Button title="增加10%" onPress={() => inc(0.1)} variant="primary" testID="btn-progress-inc-10" />
                            <UI.Button title="减少10%" onPress={() => dec(0.1)} variant="outline" testID="btn-progress-dec-10" />
                            <UI.Button title="重置为0%" onPress={reset} variant="text" testID="btn-progress-reset" />
                        </View>
                    </View>
                </Layout.Card>
            </View>

            {/* 不确定态：线性进度（indeterminate） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>不确定态（线性）</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>indeterminate 开启时显示循环动画</UI.Text>
                    <View style={styles.row}>
                        <UI.Progress
                            variant="linear"
                            indeterminate
                            color="secondary"
                            trackColor={colors.border}
                            testID="progress-linear-indeterminate"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 环形进度：不同尺寸/颜色 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>环形进度</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>不同 size 与颜色（假设 size: xs/sm/md/lg/xl）</UI.Text>
                    <View style={styles.row}>
                        <UI.Progress variant="circular" value={25} size="small" color="primary" testID="progress-circular-xs-25" />
                        <UI.Progress variant="circular" value={50} size="medium" color="secondary" testID="progress-circular-sm-50" />
                        <UI.Progress variant="circular" value={75} size="medium" color="success" testID="progress-circular-md-75" />
                        <UI.Progress variant="circular" value={100} size="large" color="warning" testID="progress-circular-lg-100" />
                        <UI.Progress variant="circular" indeterminate size="large" color="error" testID="progress-circular-xl-indeterminate" />
                    </View>
                </Layout.Card>
            </View>

            {/* 颜色与轨道色：color/trackColor */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色与轨道色</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>演示主题色与自定义色的组合</UI.Text>
                    <View style={styles.row}>
                        <UI.Progress variant="linear" value={0.4} color="primary" trackColor={colors.surface} testID="progress-color-primary-surface-track" />
                        <UI.Progress variant="linear" value={0.6} color="#90CAF9" trackColor="#E3F2FD" testID="progress-color-custom-track-custom" />
                        <UI.Progress variant="linear" value={0.8} color="success" trackColor={colors.border} testID="progress-color-success-border-track" />
                    </View>
                </Layout.Card>
            </View>

            {/* 间距：SpacingProps */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距能力</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>m/p/mh/mv/ph/pv 等</UI.Text>
                    <View style={[styles.row, styles.borderedRow]}>
                        <UI.Progress variant="linear" value={0.3} m={8} testID="progress-spacing-m-8" />
                        <UI.Progress variant="linear" value={0.5} mh={12} testID="progress-spacing-mh-12" />
                        <UI.Progress variant="linear" value={0.7} mv={12} testID="progress-spacing-mv-12" />
                        <UI.Progress variant="linear" value={0.9} p={8} testID="progress-spacing-p-8" />
                        <UI.Progress variant="linear" value={0.45} ph={16} testID="progress-spacing-ph-16" />
                        <UI.Progress variant="linear" value={0.65} pv={8} testID="progress-spacing-pv-8" />
                    </View>
                </Layout.Card>
            </View>

            {/* 盒子样式：BoxProps（背景/边框/圆角/尺寸） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>盒子样式</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>展示背景、边框、圆角与宽度（对线性效果更明显）</UI.Text>
                    <View style={styles.col}>
                        <UI.Progress
                            variant="linear"
                            value={0.5}
                            backgroundColor={colors.surface}
                            borderWidth={1}
                            borderColor={colors.border}
                            borderRadius={12}
                            width={'100%'}
                            testID="progress-box-linear-surface-bordered"
                        />
                        <UI.Progress
                            variant="linear"
                            value={0.75}
                            backgroundColor="#FFF3E0"
                            borderWidth={1}
                            borderColor={colors.border}
                            borderRadius={999}
                            width={'100%'}
                            testID="progress-box-linear-soft-capsule"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 无障碍 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>无障碍与测试</UI.Text>
                    <View style={styles.row}>
                        <UI.Progress
                            variant="linear"
                            value={0.33}
                            testID="progress-accessibility"
                        />
                    </View>
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default ProgressTestScreen;